<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
        <script type="text/javascript">

		var chart;
		var graph;

		var chartData = [{year:new Date(1950,0), value:-0.307},
				{year:new Date(1951,0), value:-0.168},
				{year:new Date(1952,0), value:-0.073},
				{year:new Date(1953,0), value:-0.027},
				{year:new Date(1954,0), value:-0.251},
				{year:new Date(1955,0), value:-0.281},
				{year:new Date(1956,0), value:-0.348},
				{year:new Date(1957,0), value:-0.074},
				{year:new Date(1958,0), value:-0.011},
				{year:new Date(1959,0), value:-0.074},
				{year:new Date(1960,0), value:-0.124},
				{year:new Date(1961,0), value:-0.024},
				{year:new Date(1962,0), value:-0.022},
				{year:new Date(1963,0), value:0.000},
				{year:new Date(1964,0), value:-0.296},
				{year:new Date(1965,0), value:-0.217},
				{year:new Date(1966,0), value:-0.147},
				{year:new Date(1967,0), value:-0.150},
				{year:new Date(1968,0), value:-0.160},
				{year:new Date(1969,0), value:-0.011},
				{year:new Date(1970,0), value:-0.068},
				{year:new Date(1971,0), value:-0.190},
				{year:new Date(1972,0), value:-0.056},
				{year:new Date(1973,0), value:0.077},
				{year:new Date(1974,0), value:-0.213},
				{year:new Date(1975,0), value:-0.170},
				{year:new Date(1976,0), value:-0.254},
				{year:new Date(1977,0), value:0.019},
				{year:new Date(1978,0), value:-0.063},
				{year:new Date(1979,0), value:0.050},
				{year:new Date(1980,0), value:0.077},
				{year:new Date(1981,0), value:0.120},
				{year:new Date(1982,0), value:0.011},
				{year:new Date(1983,0), value:0.177},
				{year:new Date(1984,0), value:-0.021},
				{year:new Date(1985,0), value:-0.037},
				{year:new Date(1986,0), value:0.030},
				{year:new Date(1987,0), value:0.179},
				{year:new Date(1988,0), value:0.180},
				{year:new Date(1989,0), value:0.104},
				{year:new Date(1990,0), value:0.255},
				{year:new Date(1991,0), value:0.210},
				{year:new Date(1992,0), value:0.065},
				{year:new Date(1993,0), value:0.110},
				{year:new Date(1994,0), value:0.172},
				{year:new Date(1995,0), value:0.269},
				{year:new Date(1996,0), value:0.141},
				{year:new Date(1997,0), value:0.353},
				{year:new Date(1998,0), value:0.548},
				{year:new Date(1999,0), value:0.298},
				{year:new Date(2000,0), value:0.267},
				{year:new Date(2001,0), value:0.411},
				{year:new Date(2002,0), value:0.462},
				{year:new Date(2003,0), value:0.470},
				{year:new Date(2004,0), value:0.445},
				{year:new Date(2005,0), value:0.470}];


        window.onload = function() {
			chart = new AmCharts.AmSerialChart();
			chart.pathToImages = "../../amcharts/javascript/images/";
			chart.marginTop = 15;
			chart.marginLeft = 60;
			chart.marginRight = 50;
			chart.dataProvider = chartData;
			chart.categoryField = "year";

			graph = new AmCharts.AmGraph();
			graph.lineColor = "#CC0000";
			graph.fillColors = "#CC0000";
			graph.negativeLineColor = "#009900";
			graph.negativeFillColors = "#009900";
			graph.fillAlphas = 0.3;
			graph.valueField = "value";
			graph.type = "smoothedLine";
			chart.addGraph(graph);

			var catAxis = chart.categoryAxis;
			catAxis.parseDates = true;
			catAxis.minPeriod = "YYYY";
			catAxis.axisColor = "#FFFFFF";
			catAxis.gridColor = "#FFFFFF";
			catAxis.gridAlpha = 0.5;
			catAxis.dashLength = 5;
			catAxis.autoGridCount = true;

			var valAxis = new AmCharts.ValueAxis();
			valAxis.axisColor = "#FFFFFF";
			valAxis.gridColor = "#FFFFFF";
			valAxis.gridAlpha = "0.5";
			valAxis.dashLength = 5;
			chart.addValueAxis(valAxis);

			var chartCursor = new AmCharts.ChartCursor();
			chartCursor.cursorAlpha = 0;
			chartCursor.cursorPosition = "mouse";
			chartCursor.categoryBalloonDateFormat = "YYYY";
			chart.addChartCursor(chartCursor);

			var chartScrollbar = new AmCharts.ChartScrollbar();
			chartScrollbar.graph = graph;
			chartScrollbar.backgroundAlpha = 0.1;
			chartScrollbar.backgroundColor = "#000000";
			chartScrollbar.scrollbarHeight = 40;

			chartScrollbar.selectedBackgroundColor = "#FFCC32";
			chart.addChartScrollbar(chartScrollbar);

			chart.write("chartdiv");
		}

		function setType(){
			var newType;
			if(document.getElementById("rb1").checked){
				newType = "line";
			}
			if(document.getElementById("rb2").checked){
				newType = "smoothedLine";
			}
			if(document.getElementById("rb3").checked){
				newType = "step";
			}
			if(graph.type != newType){
				graph.type = newType;
				chart.validateNow();
			}
		}


	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width:600px; height:400px; background-color:#FFCC32;"></div>
		<input type="radio" name="group" id="rb1" onclick="setType()"> line
		<input type="radio" checked="true"  name="group" id="rb2" onclick="setType()"> smoothed line
		<input type="radio" name="group" id="rb3" onclick="setType()"> step
	</body>
</html>